<template>
  <div class="base-container">
    <basic-container>
      <div slot="header" class="card-header">
        <i class="el-icon-close" @click="$emit('close')" style="cursor: pointer"></i>
      </div>
      <div class="tabs-label">
        <el-radio-group v-model="tabs" size="mini">
          <el-radio-button label="1">基本信息</el-radio-button>
          <el-radio-button label="2">投放数据</el-radio-button>
          <el-radio-button label="3">素材数据</el-radio-button>
          <el-radio-button label="4">团队数据</el-radio-button>
        </el-radio-group>
      </div>
      <div class="tabs-pane">
        <base-message-table v-if="tabs==='1'" :report-id="reportId"></base-message-table>
        <advertising-report v-else-if="tabs==='2'" :report-id="reportId"></advertising-report>
        <creative-report v-else-if="tabs==='3'" :report-id="reportId"></creative-report>
        <re-team-report v-else-if="tabs==='4'" :report-id="reportId"></re-team-report>
      </div>
    </basic-container>
  </div>
</template>

<script>
import BaseMessageTable from "@/views/dataReport/review-report/components/BaseMessageTable";
import AdvertisingReport from "@/views/dataReport/review-report/components/AdvertisingReport";
import CreativeReport from "@/views/dataReport/review-report/components/CreativeReport";
import ReTeamReport from "@/views/dataReport/review-report/components/ReTeamReport";

export default {
  name: "BaseDetail",
  components: {
    BaseMessageTable,
    AdvertisingReport,
    CreativeReport,
    ReTeamReport
  },
  props: {
    reportId: {
      type: Number | String,
      required: true
    }
  },
  mounted() {
  },
  data() {
    return {
      tabs: '1',
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: flex-end;
}

.base-container {
  .tabs-label {
    margin-bottom: 10px;
  }

  .tabs-pane {

  }
}
</style>
